<template>
    <div class="data-table">
        <form-layout
            class="data-form"
            ref="data_form"
            :form="form"
            :config="config"
        >
            <template slot="footer" slot-scope="scope">
                <div class="data-form-info-btn">
                    <el-button type="primary" @click.stop.native="onSubmit(scope)">搜索</el-button>
                    <el-button type="primary" plain 
                        @click.stop.native="onReset(scope)"
                    >重置</el-button>
                </div>
            </template>
        </form-layout>
        <div class="data-table-btnlist">
            <el-button
                type="primary"
                class="primary"
                size="small"
                icon="el-icon-upload"
                plain
                @click.stop.native="addInfo"
            >
                上传视频
            </el-button>
            <el-button
                type="danger"
                class="primary"
                size="small"
                icon="el-icon-delete-solid"
                plain
                @click.stop.native="batchDeleteInfo"
            >
                批量删除
            </el-button>
        </div>
        <div class="data-table-table">
            <pagination-table
                :list="list"
                :options="options"
                :columns="columns"
                :pagination="pagination"
                :get-list="getList"
                @handleSelectionChange="handleSelectionChange"
            />
        </div>
    </div>
</template>

<script>
// 添加组件
import AddInfo from './addInfo'
// 修改组件
import ModifyInfo from './modifyInfo'
// 视频播放组件
import VideoDetail from './videoDetail'
// 批量删除组件
import BatchDeleteInfo from './batchDeleteInfo'
// 获取列表接口
import { Sample_Qrcode_List } from '@/server/sampleQrcodeManage'
// 删除信息接口
import { Test_Video_DeleteInfo } from '@/server/testVideoManage'

export default {
    data() {
        return {
            form: {
                taskCode: ''
            },
            config: {
                labelWidth: '120px',
                fieldsConfig: [{
                    cols: 6,
                    name: 'taskCode',
                    label: '任务单编号：',
                    size: 'medium',
                    placeholder: '请输入任务单编号',
                    clearable: true
                }, {
                    cols: 6,
                    size: 'medium',
                    slot: 'footer'
                }]
            },
            selectionRows: [],
            list: [],
            columns: [
                {
                    width: 120,
                    prop: "taskCode",
                    label: "任务单编号",
                },
                {
                    prop: "entrustTime",
                    label: "委托日期",
                },
                {
                    width: 100,
                    prop: "samplePart",
                    label: "部位",
                },
                {
                    width: 100,
                    prop: "sampleLevel",
                    label: "样品级别",
                },
                {
                    width: 80,
                    prop: "initCheck",
                    label: "初/复检",
                },
                {
                    prop: "视频内容",
                    label: "视频内容",
                },
                {
                    width: 100,
                    label: "视频状态",
                    render: (h, params) => {
                        // 1-未录制,2-已录制,3-已上传
                        if ((params["row"] && params["row"]["videoStatus"] === "未录制") || (params["row"] && params["row"]["videoStatus"]===null)) {
                            return <el-tag type="warning" color={'rgba(0,0,0,0)'}>未录制</el-tag>;
                        }
                        if (params["row"] && params["row"]["videoStatus"] === "已上传") {
                            return <el-tag color={'rgba(0,0,0,0)'}>已上传</el-tag>;
                        }
                        if (params["row"] && params["row"]["videoStatus"] === "已录制") {
                            return <el-tag type="success" color={'rgba(0,0,0,0)'}>已录制</el-tag>;
                        }
                    },
                },
                {
                    label: "操作",
                    render: (h, params) => {
                        // <el-button type="text" icon="el-icon-edit" onClick={this.modifyInfo.bind(this,params['row'])}>修改</el-button>
                        return (
                            <div class="btn-text">
                                <el-button type="text" icon="el-icon-video-play" onClick={this.playVideo.bind(this,params['row'])}>预览</el-button>
                                <el-popconfirm
                                    title="确定删除本条信息吗？"
                                    icon="el-icon-info"
                                    icon-color="#f78989"
                                    confirm-button-type="text"
                                    onConfirm={this.deleteInfo.bind(this, params['row'])}
                                >
                                    <el-button type="text" icon="el-icon-delete" slot="reference" onClick={(event) => {event.stopPropagation()}}>删除</el-button>
                                </el-popconfirm>
                            </div>
                        )
                    },
                },
            ],
            options: {
                index: false,
                initTable: true,
                border: false,
                selection: true,
                mutiSelect: true,
                headerCellStyle: {
                    backgroundColor: "#E8F3FF",
                    color: "#3D4256 ",
                },
            },
            pagination: {
                show: true,
                total: 0,
                currentPage: 1,
                pageSize: 15,
            }
        };
    },
    methods: {
        // 重置按钮
        onReset(scope) {
            // 表单重置
            scope.rf()
            // 查询列表
            this.getList()
        },
        // 搜索按钮
        onSubmit(scope) {
            if (scope.sf()) {
                if( this.form['taskCode'] === '' ) {
                    return;
                }
                this.getList()
            }
        },
        // 勾选存储状态
        handleSelectionChange(val) {
            this.selectionRows = val
        },
        // 预览
        playVideo(row, event) {
            // 阻止事件冒泡 - 避免再次确认undefined
            event && event.stopPropagation()
            // 视频播放组件
            let instance = this.$dialog.show(VideoDetail, {
                title: '视频预览',
                width: '45%',
                height: '45%',
            }, row)
            instance.onDidClose = () => {
                // this.getList()
            }
        },
        // 添加
        addInfo() {
            let rows = this.selectionRows
            if( rows.length === 1 ) {
                if( rows[0]['videoStatus'] === '未录制' || rows[0]['videoStatus'] === null ) {
                    let instance = this.$dialog.show(AddInfo, {
                        title: '上传视频',
                        width: '45%',
                        closeOnClickModal: false,
                        closeOnPressEscape: false
                    }, rows[0])
                    instance.onDidClose = () => {
                        this.getList()
                    }
                } else {
                    this.$message.warning('只有勾选，未录制图层')
                }
            } else {
                this.$message.warning('上传视频只支持勾选 1 个图层')
            }
            
        },
        // 修改
        modifyInfo(row, event) {
            // 阻止事件冒泡 - 避免再次确认undefined
            event && event.stopPropagation()
            if( row['videoStatus'] === '已录制' || row['videoStatus'] === '已上传' ) {
                let instance = this.$dialog.show(ModifyInfo, {
                    title: '信息修改',
                    width: '45%',
                    closeOnClickModal: false,
                    closeOnPressEscape: false
                }, row)
                instance.onDidClose = () => {
                    this.getList()
                }
            }
        },
        // 删除
        async deleteInfo(row, event) {
            // 阻止事件冒泡 - 避免再次确认undefined
            event && event.stopPropagation()
            // 视频删除
            await Test_Video_DeleteInfo(row['sampleId'])
            // 加载列表
            this.getList()
        },
        // 批量删除
        batchDeleteInfo() {
            if( this.selectionRows.length !== 0 ) {
                let instance = this.$dialog.show(BatchDeleteInfo, {
                    title: '批量删除',
                    width: '50%',
                    closeOnClickModal: false,
                    closeOnPressEscape: false
                }, this.selectionRows)
                instance.onDidClose = () => {
                    this.getList()
                }
                return;
            }
            this.$message.warning('请先勾选信息')
        },
        async getList() {    
            // 列表loading
            this.options.loading = true
            // 获取列表
            let params = {
                taskCode: this.form['taskCode'],
                pageNum: this.pagination['currentPage'],
                pageSize: this.pagination['pageSize']
            }
            for( let key in params ) {
                if( params[key] === '' ) {
                    delete params[key]
                }
            }
            let data = await Sample_Qrcode_List(params)
            // 总条数
            this.pagination['total'] = data['total']
            // 列表数据
            this.list = data['rows']
            // 结束loading
            this.options.loading = false
        }
    },
};
</script>

<style lang="scss" scoped>
.data-table {
    padding: 5px 0;
    overflow: hidden;
    &-btnlist {
        float: right;
        margin-bottom: 28px;
    }
    &-table {
        color: #fff;
    }
    ::v-deep .btn-text {
        color: #fff;
        .el-button--text {
            &:nth-of-type(2) {
                color: #e6a23c;
                &:hover {
                    color: #ebb563;
                }
            }
        }
        .el-popover__reference-wrapper {
            margin-left: 10px;
            .el-button--text {
                color: #f56c6c;
                &:hover {
                    color: #f78989;
                }
            }
        }
    }
}
</style>
